import React from 'react';
import {
    SafeAreaView,
    ScrollView,
    StatusBar,
    StyleSheet,
    Text,
    useColorScheme,
    View,
    Alert,
    TouchableOpacity,
    Image
  } from 'react-native';

const Tab = (props) => {
    const { onActive, data, active = 0 } = props;
    return (
        <View style={styles.tabContainer}>
            {
                data.map((item, index) => {
                  const  myStyle= index == active ? styles.itemActive : styles.item
                  return (
                        <TouchableOpacity key={index} style={myStyle} onPress={() => onActive(index)}>
                            <Text>{item}</Text>
                        </TouchableOpacity>
                    )
                })
            }
        </View>
    )
}

const styles = StyleSheet.create({
    tabContainer: {
       width: '100%',
       display: 'flex',
       flexDirection: 'row'
    },
    item: {
        flex: 1,
        display: 'flex',
        justifyContent:'center',
        alignItems: 'center',
        height: 42
    },
    itemActive: {
        flex: 1,
        display: 'flex',
        justifyContent:'center',
        alignItems: 'center',
        height: 42,
        borderBottomWidth: 3,
        borderBottomColor: '#f4ea2a'
    }
  });

export default Tab